<template>
    <div>
        <navBar v-on="$listeners" v-bind="$attrs" @drawTaskListChange="drawTaskListChange" @taskChange="taskChange" />
        <!-- <div class="cloud_container"> -->
        <LayoutDrag :dragBtnFlag="true">
            <template v-slot:left-content>
                <div style="height: calc(100vh - 160px);">
                    <div class="move_left_box">
                        <div class="move_left_box_content">
                            <div class="move_left_box_content_toolbar">
                                <div class="move_left_box_content_title">
                                    {{ option.title }}
                                </div>
                                <div class="move_left_box_content_title_tools">
                                    <!-- 任务记录 -->
                                    <div class="task_record">
                                        <span class="task_name">
                                            任务记录：
                                        </span>
                                        <el-select v-model="taskValue" @change="changeTask">
                                            <el-option v-for="item in taskOptions" :key="item.taskId" :label="item.taskName"
                                                :value="item.taskId">
                                            </el-option>
                                        </el-select>
                                    </div>
                                    <!-- 查看项目 -->
                                    <!-- <span class="el-change-link" v-if="tools.item.show">
                                <i class="el-icon-search"></i>
                                <span>查看项目</span>
                            </span> -->
                                    <!-- 绘图指南 -->
                                    <!-- <el-tooltip class="item" effect="dark" content="绘图指南" placement="bottom"
                                v-if="tools.guide.show">
                                <div class="el-dropdown-link">
                                    <i class="el-icon-collection"></i>
                                </div>
                            </el-tooltip> -->
                                    <!-- 下载 -->
                                    <div class="dropdown">
                                        <el-dropdown @command="handleCommand"
                                            v-if="tools.dropdown.show && tools.dropdown.config.length > 0">
                                            <span class="el-dropdown-link">
                                                <i class="el-icon-download"></i>
                                            </span>
                                            <el-dropdown-menu slot="dropdown">
                                                <el-dropdown-item :command="item.value"
                                                    v-for="(item, index) in tools.dropdown.config" :key="index">{{
                                                        item.label
                                                    }}</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </el-dropdown>
                                    </div>
                                </div>
                            </div>
                            <div class="static_view">
                                <viewerCom :url="option.url" :key="option.url" />
                            </div>
                        </div>
                    </div>
                </div>
            </template>

            <template v-slot:right-content>
                <div style="height: calc(100vh - 160px);">
                    <div class="move_right_box" ref="move_right_box">
                        <div class="move_right_box_content">
                            <el-tabs v-model.trim="activeName">
                                <el-tab-pane name="description" v-if="option.description">
                                    <div slot="label" style="font-size: 16px;">
                                        <span>图表说明</span>
                                    </div>
                                    <img :src="option.description" width="100%" />
                                    <!-- <description v-on="$listeners" v-bind="$attrs" :option="option" /> -->
                                </el-tab-pane>

                                <el-tab-pane name="uploadInfo">
                                    <div slot="label" style="font-size: 16px;">
                                        <span>文件上传</span>
                                    </div>
                                    <fileUpload :option="option" v-on="$listeners" v-bind="$attrs"
                                        @submitDraw="submitDraw" />
                                </el-tab-pane>

                                <el-tab-pane name="chartInfo" :disabled="activeName !== 'chartInfo'">
                                    <div slot="label" style="font-size: 16px;">
                                        <span>图表调整</span>
                                    </div>
                                    <chartConfig v-on="$listeners" v-bind="$attrs" :option="option" />
                                </el-tab-pane>
                                <el-tab-pane name="specification" v-if="option.specification">
                                    <div slot="label" style="font-size: 16px;">
                                        <span>说明书</span>
                                    </div>
                                    <img :src="option.specification" width="100%" />
                                </el-tab-pane>
                            </el-tabs>

                        </div>
                    </div>
                </div>
            </template>
        </LayoutDrag>

        <!-- </div> -->
    </div>
</template>

<script>
// import lineChart from './chartList/lineChart'
import fileUpload from './fileUpload'
import chartConfig from './chartConfig'
import description from './description'
import { getPageDrawRecordRequest, downloadDrawFileRequest } from '@/api/tools'
export default {
    components: {
        fileUpload, chartConfig, description
    },
    props: {
        option: {
            type: Object,
            default: () => { }
        }
    },
    name: 'GenecloudUiIndex',
    data() {
        return {
            miniWidth: false,
            activeName: 'uploadInfo',
            tools: null,
            taskOptions: [],
            taskValue: '',
            downloadName: null,
        };
    },
    created() {
        this.init()
        this.tools = this.option.tools
    },
    watch: {
        taskValue: {
            handler(val, newVal) {
                if (val) {
                    const item = this.taskOptions.find(i => i.taskId == val)
                    this.downloadName = item.taskName
                }
            },
            immediate: true
        }
    },
    methods: {
        async init() {
            let pageCode = this.$router.history.current.name
            this.$store.commit('menu/SIDEBAR_MENU', 'chartOverview')
            const res = await getPageDrawRecordRequest(pageCode)
            if (res.code !== 200) return this.$message.error(res.message)
            this.taskOptions = res.data
            //判断是否从任务列表跳转过来
            if(this.$queryToObjectsearch(window.location.search).taskId){
                this.taskValue = this.$queryToObjectsearch(window.location.search).taskId
            }else if(this.$route.params.taskId){
                this.taskValue = this.$route.params.taskId
            }else {
                this.taskValue = res.data[0].taskId
            }
        },
        changeWidth() {
            this.miniWidth = !this.miniWidth
        },
        //下载
        async handleCommand(downloadType) {
            let name
            let pageCode = this.$router.history.current.name
            let params = {
                pageCode,
                taskId: this.taskValue,
                downloadType,
            }
            const res = await downloadDrawFileRequest(params)
            if (downloadType == 'result') {
                name = 'xls'
            } else if (downloadType == 'resultFile') {
                name = 'zip'
            } else {
                name = downloadType
            }
            this.$dropDown(res, this.downloadName + '.' + name)
        },
        submitDraw(activeName) {
            this.activeName = activeName
        },
        changeTask(value) {
            this.$emit('taskChange', value)
            let name = this.$router.history.current.name + 'taskId'
            localStorage.setItem(name, value)
        },
        //任务list改变
        drawTaskListChange(value) {
            this.taskOptions = value
            this.taskValue = value[1] ? value[1].taskId : '示例'
            this.changeTask(this.taskValue)
        },
        taskChange(value) {
            this.taskValue = value
        },
    },
};
</script>

<style lang="scss" scoped>
.task_record {
    min-width: 300px;
    margin-right: 10px;

    ::v-deep .el-input__inner {
        display: flex;
        align-content: center;
        align-items: center;
        border-radius: 6px;
        height: 30px;
    }

    ::v-deep .el-input__icon {
        line-height: 30px;
    }
}

.el-dropdown-link {
    cursor: pointer;
    margin-right: 15px;
    display: block;
    color: #666;
    width: 26px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    font-size: 18px;
    background-color: #f0f0f0;
    border-radius: 2px;
}

.el-change-link {
    cursor: pointer;
    display: block;
    color: #666;
    height: 32px;
    padding: 0 6px;
    line-height: 32px;
    margin-right: 15px;
    background-color: #f0f0f0;
}

::v-deep .el-tabs__content {
    min-width: 400px;
    overflow-x: auto;
}
</style>